Takeaway

• 讓組件和React之外的系統同步
• 一般來說，副作用得在事件處理函數裡發生。但要是沒有特定的觸發事件，就可以使用Effect包裹副作用
• 不要太常使用Effect
• 編寫Effect的三步驟：宣告 → 指定 → （清理）
• Effect預設會在每次渲染後執行，所以要指定依賴
• React使用Object.is來確認依賴項是否發生變化
• 如果依賴項不會改變，可以不用特別清理
• 依賴陣列如果設定空陣列，代表組件掛載後才會執行useEffect
• ref和set函數都是穩定的，所以不用放進依賴陣列
• 但如果無法確認傳來的是不是同個ref等等，就要放了
• 開發環境下，會連接兩次，斷開一次。React會多測試，不要用ref阻止
• 利用useEffect處理非同步請求fetch時，可能會因為請求切換太快，而遇到競態條件（Race Condition）。不引入其他套件的應對方式有AbortController
• 關於切換太快的效能優化方式還有節流（Throttle）函式
• 如果想要緩存資料而不是刪掉再請求：可使用React Query、useSWR和 React Router v6.4+等第三方解決方案
• Intersection Observer：常用來觀察元素在視窗裡的可視程度
• 如果要使用的資料只需要載入一次，如確認登入狀態或使用本地資料，可以寫在useEffect之外
• 業務邏輯（如按鈕購買）不該放在useEffect裡，而該寫到事件處理函數